<template>
  <div>
    <!-- head-tool -->
    <head-tool>
      <template #right>
        <el-button type="primary" @click="$refs.perm.show(1, '0')">添加权限</el-button>
      </template>
    </head-tool>
    <!-- table -->
    <el-card style="margin-top:40px;">
      <!-- 只要是树形数据的表格必须加row-key，给唯一值 -->
      <el-table
        :data="tableData"
        style="width: 100%;margin-bottom: 20px;"
        row-key="id"
        border
        default-expand-all
        :tree-props="{children: 'children'}"
      >
        <el-table-column
          prop="name"
          label="名称"
          sortable
          width="180"
        />
        <el-table-column
          prop="code"
          label="标识"
          sortable
          width="180"
        />
        <el-table-column
          prop="description"
          label="描述"
        />

        <el-table-column
          label="操作"
        >
          <template v-slot="{row}">
            <el-button v-if="row.type === 1" type="text" @click="$refs.perm.show(2, row.id)">添加</el-button>
            <el-button type="text" @click="$refs.perm.editShow(row.id)">编辑</el-button>
            <el-button type="text" @click="del(row.id)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <perm-dialog ref="perm" @reload="getData" />
    </el-card>
  </div>
</template>

<script>
import { permListAPI, delPermAPI } from '@/api/permissions'
import { array2Tree } from '@/utils'
import PermDialog from './components/PermDialog'
export default {
  components: {
    PermDialog
  },
  data() {
    return {
      tableData: []
    }
  },
  created() {
    this.getData()
  },
  methods: {
    // 加载数据
    async getData() {
      const res = await permListAPI()
      this.tableData = array2Tree(res.data, '0')
    },

    // 删除权限
    async del(id) {
      await delPermAPI(id)
      this.$message.success('删除成功')
      this.getData()
    }
  }
}
</script>

  <style>

  </style>
